<script>
export default {
  name: 'treeParents',
  data() {
    return {
      showChild: false,
      postList: {
        NONE: '无',
        ADMINSTRATOR: '负责人',
        DIRECTOR: '主管',
        WOKER: '干事',
      },
    }
  },
  props: {
    treeData: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  methods: {
    showOrHidChild () {
      this.showChild = !this.showChild
    },
    getDataAndFun(obj, data) {
      this.$emit('getId', obj, data)
    },
  }
}
</script>

<template>
  <div class="tree_view">
    <div class="one_tree_node">
<!--      {{ treeData.child.length }}-->
      <el-popover
          v-if="treeData.operate && treeData.operate.length !== 0"
          placement="bottom"
          :width="200"
          trigger="click"
      >
        <template #reference>
          <div class="tree_node" v-if="treeData.type === 'department'">
            <span class="el-icon-s-home"></span>
            {{ treeData.label }}
          </div>
          <div class="tree_node" v-else-if="treeData.type === 'menu'">
            <span class="el-icon-menu"></span>
            {{ treeData.label }}
          </div>
          <div class="tree_node" v-else-if="treeData.type === 'teams'">
            <span class="el-icon-s-order"></span>
            {{ treeData.label }}
          </div>
          <div class="onePersonnel"
               v-else-if="treeData.type === 'employees'"
               :class="[treeData.isMale ? 'onePersonnel_man' : 'onePersonnel_woman']">
            <div class="onePersonnel_img">
              <img v-if="treeData.isMale" src="@/assets/man.png" alt="">
              <img v-else src="@/assets/woman.png" alt="">
            </div>
            <div class="personnel_content">
              <div class="personnel_content_li">姓名：{{ treeData.label }}</div>
              <div class="personnel_content_li">职务：{{ postList[treeData.officialRank] }}</div>
            </div>
          </div>
          <div class="tree_node" v-else>
            <span class="el-icon-s-home"></span>
            {{ treeData.label }}
          </div>
        </template>
        <div class="navList">
          <div class="oneNav" v-for="(data, index) in treeData.operate" :key="index" @click="getDataAndFun(
              {
                fun: data.funName,
                data: treeData
              })">{{ data.btnName }}</div>
        </div>
      </el-popover>
     <template v-else>
       <div class="tree_node" v-if="treeData.type === 'department'">
         <span class="el-icon-s-home"></span>
         {{ treeData.label }}
       </div>
       <div class="tree_node" v-else-if="treeData.type === 'menu'">
         <span class="el-icon-menu"></span>
         {{ treeData.label }}
       </div>
       <div class="tree_node" v-else-if="treeData.type === 'teams'">
         <span class="el-icon-s-order"></span>
         {{ treeData.label }}
       </div>
       <div class="onePersonnel"
            v-else-if="treeData.type === 'employees'"
            :class="[treeData.isMale ? 'onePersonnel_man' : 'onePersonnel_woman']">
         <div class="onePersonnel_img">
           <img v-if="treeData.isMale" src="@/assets/man.png" alt="">
           <img v-else src="@/assets/woman.png" alt="">
         </div>
         <div class="personnel_content">
           <div class="personnel_content_li">姓名：{{ treeData.label }}</div>
           <div class="personnel_content_li">职务：{{ postList[treeData.officialRank] }}</div>
         </div>
       </div>
       <div class="tree_node" v-else>
         <span class="el-icon-s-home" ></span>
         {{ treeData.label }}
       </div>
     </template>

      <template >
        <div class="verticalLine_body">
          <div class="verticalLine"></div>
        </div>
        <div class="tree_node_btn" >
          <span class="btn_icon el-icon-circle-plus" v-show="showChild" @click="showOrHidChild"></span>
          <span class="btn_icon el-icon-remove" v-show="!showChild" @click="showOrHidChild"></span>
        </div>
        <div v-show="!showChild">
          <tree-children @getId="getDataAndFun" :tree-data="treeData.child"></tree-children>
        </div>
      </template>
    </div>


  </div>
</template>

<style scoped lang="scss">
.tree_view {
  width: max-content;
  height: auto;
  position: relative;

  .one_tree_node {
    flex-wrap: wrap;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: auto;

    .tree_node {
      width: max-content;
      height: auto;
      font-size: 16px;
      box-sizing: border-box;
      padding: 10px 20px;
      cursor: pointer;
      border: 1px solid #939090;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .verticalLine_body {
      width: 100%;
      height: auto;
      display: flex;
      display: -webkit-flex;
      display: -moz-flex;
      align-items: center;
      justify-content: center;

      .verticalLine {
        width: 1px;
        flex-basis: 1px;
        flex-shrink: 0;
        height: 30px;
        background-color: #939090;
      }
    }

    .tree_node_btn {
      width: 100%;
      height: auto;
      display: flex;
      display: -webkit-flex;
      display: -moz-flex;
      align-items: center;
      position: relative;
      justify-content: center;

      .btn_icon {
        cursor: pointer;
        font-size: 24px;
        position: relative;
        z-index: 1000;
        box-sizing: border-box;
        background-color: #ffffff;
        color: deepskyblue;
      }
    }
  }
}

.navList {
  width: 100%;
  height: auto;

  .oneNav {
    width: 100%;
    height: 40px;
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 10px;
    line-height: 40px;
    border-bottom: 1px solid #eeeeee;
    background-color: #ffffff;
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background-color: #eeeeee;
    }
  }
}

.onePersonnel {
  width: max-content;
  height: auto;
  padding: 10px;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  box-sizing: border-box;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.5s;

  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  }

  .onePersonnel_img {
    width: 60px;
    height: auto;
    flex-basis: 60px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding-top: 10px;
    //background: #a4a4a4;

    & > img {
      width: 100%;
      height: auto;
    }
  }

  .personnel_content {
    width: 190px;
    flex-basis: 190px;
    max-width: 190px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding-left: 20px;
    padding-top: 15px;

    .personnel_content_li {
      width: 100%;
      height: 40px;
      overflow: hidden;
      white-space: nowrap;
      font-size: 14px;
      color: rgb(48, 49, 51);
    }
  }
}

.onePersonnel_woman {
  border-top:10px solid #6a6666;
}

.onePersonnel_man {
  border-top:10px solid #6a6666;
}
</style>
